<template lang="html">
  <div class="containers-box">
    <tabs :value="value" @getIndex="getCurrentFood">
      <tab v-if='tabslist.length>0' label="排毒" index="1">
        <WorkshopTabList :tabslist='tabslist' />
      </tab>
       <tab label="抗皱" index="2">
        <WorkshopTabList :tabslist='tablist2' />
      </tab>
      <tab label="祛斑" index="3">
        <WorkshopTabList :tabslist='tabslist' />
      </tab>
      <tab label="美白" index="4">
        <WorkshopTabList :tabslist='tablist2' />
      </tab>
      <tab label="护发" index="5">
        <WorkshopTabList :tabslist='tabslist' />
      </tab>
      <tab label="润肤" index="6">
        <WorkshopTabList :tabslist='tablist2' />
      </tab>
      <tab label="祛痘" index="7">
        <WorkshopTabList :tabslist='tabslist' />
      </tab>
    </tabs>
  </div>
</template>

<script>
import WorkshopTabList from './Workshoptablist'
export default {
  data(){
    return{
      value:'1',
      tabslist:[],
      tablist2:[]
    }
  },
  components:{
    WorkshopTabList
  },
  methods:{
    getCurrentFood(index){
      this.value= index;
    }
  },
  mounted(){
    this.$axios.get(this.HOST + "/api/goodslist?size=5&typeId=1111&offset=0")
    .then(res => {
      this.tabslist = res.data
      console.log(this.tabslist);
    })
    .catch(error => {
      console.log(error)
    })
    this.$axios.get(this.HOST + "/api/goodslist?size=5&typeId=1112&offset=0")
    .then(res => {
      this.tablist2 = res.data
      console.log(this.tabslist);
    })
    .catch(error => {
      console.log(error)
    })
  }
}
</script>

<style lang="less">
.containers-box{
  width: 100%;
  height: 100%;
  .tabs-box{
    width: 100%;
    height: 2.5rem;
    .tabs-warp{
      width: 90%;
      height: 2.5rem;
      margin-top: 0.2rem;
      margin: 0 auto;
      .tabs-left{
        width: 30%;
        height: 2.5rem;
        background: red;
        float: left;
        img{
          width: 100%;
          font-size: 100%;
          height: 100%;
          float: left;
        }
      }
      .tabs-right{
        margin-left: 2.2rem;
        h3{
          letter-spacing: 0.05rem;
          margin-top: 0.2rem;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        p{
          color: #BBBBBB;
          letter-spacing: 0.02rem;
          margin-top: 0.1rem;
        }
        .span1{
          color: #F45756
        }
        .span2{
          color: #E1E1E1;
          font-size: 0.1rem;
          margin-left: 0.8rem;
        }
        .span3{
          color: #999;
          font-size: 0.5rem;
          margin-left: 0.4rem;
        }
      }
    }
  }
}

</style>
